<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入layui的核心样式库-->
    <link rel="stylesheet" href="res/layui/css/layui.css">
</head>
<body>

    <div class="layui-container">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>管理员列表</legend>
        </fieldset>
        <!--用于渲染数据的表格组件-->
        <table id="adminTab"></table>
    </div>


    <!--layui的核心组件库-->
    <script src="res/layui/layui.js"></script>
    <script>
        layui.use(function (){
            //加载表格组件
            let table = layui.table
            //渲染数据表格
            table.render({
                elem:'#adminTab',      //绑定需要显示数据的表格元素（css选择器）
                url:'/admin/list',     //服务端数据接口地址
                page:{                //分页配置
                    limit:2,                //每页条数
                    limits:[2,5,10,15,20]   //每页条数选择项
                },
                cols:[[
                    {type: 'checkbox'},                     //复选框组件（layui内置）
                    {title: '序号',type:'numbers'},          //序号组件（layui内置）
                    {title: '用户名',field:'username'},       //用户名字段，匹配数据属性字段
                    {title: '邮箱',field: 'email'},
                    {title: '电话',field: 'phone'},
                    {title: '状态',field: 'status'}
                ]]
            })
        })
    </script>
</body>
</html>